<template>
  <el-row :gutter="16" class="dynamic-statistics">
    <el-col v-for="(item, index) in items" :key="index" :span="item.span || 6">
      <div class="statistic-card" :style="{ backgroundColor: item.bgColor }">
        <div class="statistic-label">{{ item.label }}</div>
        <div class="statistic-value">{{ item.value }}</div>
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
export interface StatisticsItem {
  /** 标签名称 */
  label: string;
  /** 值 */
  value: string | number;
  /** 背景颜色 */
  bgColor: string;
  /** 栅格占据的列数（共24列），默认6（即每行4个） */
  span?: number;
}

interface Props {
  /** 统计项列表 */
  items: StatisticsItem[];
}

withDefaults(defineProps<Props>(), {
  items: () => [],
});
</script>

<style scoped lang="scss">
.dynamic-statistics {
  width: 100%;
}

:deep(.el-col) {
  margin-bottom: 16px;
}

.statistic-card {
  width: 100%;
  padding: 20px;
  border-radius: 8px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;

  // &:hover {
  //   transform: translateY(-2px);
  //   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  // }
}

.statistic-label {
  font-size: 14px;
  font-weight: 400;
  opacity: 0.9;
  margin-bottom: 8px;
  line-height: 1.4;
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  overflow-wrap: break-word;
}

.statistic-value {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}
</style>
